<!-- 
  模板部分：
  展示两个关联的数据值：
  1. 通过toRefs解构出的message变量
  2. 原始响应式对象obj的message属性
  两者会保持同步更新，体现toRefs的联动特性
-->
<template>
    <div>
        <div>message的值：{{ message }}</div>
        <div>obj.message的值：{{ obj.message }}</div>
    </div>
</template>

<!-- 
  脚本部分：
  演示Vue 3中toRefs API的使用，展示如何批量解构响应式对象的属性
-->
<script setup>
// 从Vue中导入reactive和toRefs函数
// reactive：创建响应式对象
// toRefs：将响应式对象的所有属性转换为ref引用，便于解构使用
import { reactive, toRefs } from 'vue'

// 创建响应式对象obj，包含message属性
// 初始值为关于珍惜时光的名言
const obj = reactive({
    message: '盛年不重来，一日难再晨'
})

// 使用toRefs将响应式对象obj的所有属性转换为ref引用
// 然后通过对象解构获取message属性的引用
// 特点：解构后的message与原obj.message保持双向同步
const { message } = toRefs(obj)

// 设置定时器，2秒后修改解构出的message的值
setTimeout(() => {
    // 通过.value修改ref引用的值
    // 此时原obj.message也会同步更新
    message.value = '少壮不努力，老大徒伤悲'
}, 2000); // 延迟时间：2000毫秒（2秒）
</script>